<template>
  <div ref="content">
    <Loading v-show="isLoad" :isLoad.sync="isLoad" num="2"></Loading>
    <!-- <div v-show="isLoad">loading........</div> -->
    <div v-show="!isLoad" :style="{backgroundColor:'#f5f5f5'}" class="content">
      <!-- 顶部搜索 -->
      <van-sticky>
        <div class="wrapper">
            <div class="locationWrapper">
                <svg viewBox="0 0 32 32" class="icon iconLocation">
                    <path fill="#81838E" fill-rule="evenodd"
                          d="M14.521 30.445c.817.738 2.142.75 2.958 0 0 0 11.521-9.82 11.521-17.158C29 5.95 23.18 0 16 0S3 5.949 3 13.287c0 7.339 11.521 17.158 11.521 17.158zM16 18a5 5 0 1 0 0-10 5 5 0 0 0 0 10z"></path>
                </svg>
                <span class="address">{{local}}</span>
                <svg viewBox="0 0 32 32" class="icon iconArrow">
                    <path fill="#81838E" fill-rule="evenodd"
                          d="M14.724 19.17c.783.784 2.05.788 2.837 0l5.047-5.047c1.173-1.172.776-2.123-.869-2.123H10.545c-1.652 0-2.04.952-.869 2.123l5.048 5.048z"></path>
                </svg>
            </div>
            <div class="searchWrapper">
                <div class="searchContent" @click="searchClick">
                    <div class="iconSearchWrapper">
                        <svg viewBox="0 0 32 32" class="icon iconSearch">
                            <path fill="#999" fill-rule="evenodd"
                                  d="M23.624 21.503c3.47-4.51 3.14-11.003-.992-15.135-4.491-4.49-11.773-4.49-16.264 0-4.49 4.491-4.49 11.773 0 16.264 4.132 4.131 10.625 4.462 15.135.992l4.66 4.66a1.5 1.5 0 1 0 2.121-2.121l-4.66-4.66zm-3.114-.993A8.5 8.5 0 1 0 8.49 8.49a8.5 8.5 0 0 0 12.02 12.02z"></path>
                        </svg>
                    </div>
                    <span class="searchPrompt">输入商品名称</span>
                </div>
            </div>
        </div>
      </van-sticky>

      <!-- 轮播 -->
      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="limegreen">
        <van-swipe-item v-for="(item,index) in bannerList" :key='index' class="banner">
          <img :src="item.icon_url">
        </van-swipe-item>
      </van-swipe>

      <!-- 导航列表 -->
      <div class="navlist">
          <div v-for="(item,index) in navList" :key="index" class="navitem">
              <div class="imagewrapper">
                  <img :src="item.icon_url" alt="item.name" class="image">
              </div>
              <div class="titleWrapper">
                  <span class="title">{{item.name}}</span>
              </div>
          </div>
      </div>
      <!-- 限时抢购 -->
      <flash-sale :flashlist="flashList"/>
      <!-- 猜你喜欢 -->
      <you-like v-model="goodsList" :goodslist="goodsList"/>

      <!-- 回到顶部 -->
      <div class="backTop" v-show="backtopShow" @click="backTop">
        <van-icon name="back-top" size="32px" color="#b5b5b5"/>
      </div>
    </div>
  </div>
</template>

<script>
  import YouLike from './componet/youlike'
  import FlashSale from './componet/flashSale'
  import {getHomeData} from '../../api'
  import Loading from '@/components/loading'
  import _ from 'lodash'
  export default {
    name: 'Index',
    components:{
      YouLike,
      FlashSale,
      Loading
    },
    data() {
      return {
        bannerList: [],
        navList: [],
        flashList: [],
        goodsList: [],
        backtopShow:false,
        local:this.local,
        isLoad:true,
        show:true,
        scrollTop:0
      }
    },
    beforeCreate() {
      this.$dialog.confirm({
        title: "是否获允许取地理位置信息",
        confirmButtonText: "确认", //改变确认按钮上显示的文字
        cancelButtonText: "取消" //改变取消按钮上显示的文字
      }).then(()=> {
        this.show = false
        this.getLocal()

      }).catch(() => {
        this.show = false
        this.local = '全国'
      })
    },
    created() {
      this.getHomeData()
      this.getLocal()

      // console.log(_().debounce())
      //  _().debounce(function(){

      // }, 250);
    },
    mounted() {
      window.addEventListener('scroll',() => {
        this.scrollTop = window.scrollY
        if(this.scrollTop >= 250){
          this.backtopShow = true
        }else{
          this.backtopShow = false
        }
      })

    },
    // 回到当前页面
    activated() {
      // console.log(this.$refs.content.scrollTop)
      // this.$store.state.scrollTop
      // console.log(window)
      // setTimeout(() => {
        let scrolltop = this.$store.state.scrollTop
        window.scrollTo(0,scrolltop)
      // },4000)


    },
    // 离开当前页面
    deactivated() {
      this.$store.commit('setScrollTop',this.scrollTop)

    },
    methods:{
      //获取首页数据
      async getHomeData(){
        const {data} = await getHomeData()
        this.bannerList = data.data.list[0].icon_list
        this.navList = data.data.list[2].icon_list
        this.flashList = data.data.list[3].product_list
        this.goodsList = data.data.list[12].product_list
      },
      searchClick(){
        this.$router.push('/search')
      },
      getLocal(){
        var myCity = new window.BMapGL.LocalCity()
        myCity.get((result)=>{
          this.local = result.name;
        })
      },
      // 回到顶部
      backTop() {
        window.scrollTo({top:0,left:0,behavior:'smooth'})
      }
    }
  }
</script>

<style scoped>
  /* 顶部搜索 */
  .wrapper {
      position: relative;
      left: 0;
      top: 0;
      height: 3.125rem;
      line-height: 3.125rem;
      width: 100%;
      background: white;
      border-bottom: solid 1px #eeeeee;
      border-top: solid 1px #eeeeee;
  }

  .iconLocation {
      position: absolute;
      left: 0.3rem;
      top: 1.0625rem;
      width: 1.875rem;
      height: 1rem;
      vertical-align: middle;
  }

  .locationWrapper {
      float: left;
      height: 3.125rem;
      width: 40%;
      white-space: nowrap;
      opacity: 1;
  }

  .locationWrapper .address {
      padding-left: 1.875rem;
      display: inline-block;
      font-size: 0.9rem;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
      width: 80%;
      vertical-align: middle;
  }

  .locationWrapper .iconArrow {
      vertical-align: middle;
  }

  .locationWrapper.wheel {
      opacity: 0;
      -webkit-transition: opacity 1.2s;
      transition: opacity 1.2s;
  }

  .searchWrapper {
      position: absolute;
      top: 0.625rem;
      right: 2%;
      line-height: 3.125rem;
      text-align: right;
      width: 50%;
      vertical-align: middle;
  }

  .searchWrapper.wheel {
      width: 96%;
      -webkit-transition: width 1s ease .2s;
      transition: width 1s ease .2s;
  }

  .searchContent {
      float: right;
      border-radius: 3.125rem;
      width: 100%;
      height: 1.875rem;
      line-height: 1.875rem;
      text-align: center;
      background: #F2F2F2;
  }

  .iconSearchWrapper {
      display: inline-block;
      width: 1.25rem;
      height: 100%;
  }

  .iconSearch {
      margin-top: 0.3125rem;
      width: 1.25rem;
      height: 1.25rem;
  }

  .searchPrompt {
      display: inline-block;
      vertical-align: top;
      margin-left: 0.25rem;
      text-align: center;
      font-size: 0.875rem;
      color: #999999;
  }

  @media (min-width: 320px) {
      .searchWrapper {
          width: 55%;
      }
  }

  @media (min-width: 375px) {
      .searchWrapper {
          width: 57%;
      }
  }

  @media (min-width: 414px) {
      .searchWrapper {
          width: 62%;
      }
  }

  .icon {
      fill: #999;
      width: 1rem;
      height: 1rem;
  }

  .my-swipe .van-swipe-item {
    color: #fff;
    font-size: 20px;
    text-align: center;
  }

  .my-swipe img {
    width: 100%;
    height: 100%;
  }

  .navlist {
            width: 100%;
            padding-top: 0.9375rem;
            background: #FFF;
            padding-bottom: 0.9375rem;
        }

  .navitem {
      display: inline-block;
      padding-top: 0.3125rem;
      width: 20%; }

  .imagewrapper {
      padding-bottom: 58.823%;
      height: 0;
      overflow: hidden;
      text-align: center; }

  .imagewrapper .image {
      width: 58.823%;
      height: auto;
      display: inline-block; }

  .titleWrapper {
    text-align: center;
      padding: 0.4375rem 0.3125rem 0.375rem 0.3125rem; }

  .titleWrapper{
      font-size: 0.75rem;
      color: #555555;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
  }

  /* 回到顶部 */
  .backTop{
    width: 80px;
    line-height: 30px;
    border-radius: 50%;
    border: #E6E6E6 1px solid;
    text-align: center;
    background-color: #ffffff;
    position: fixed;
    bottom: 200px;
    right: 30px;
    z-index: 10;
  }
</style>
